<template>

  <div class="container">
    <div class="card">
      <div style="height: 100%;display: flex;">
        <div style="flex:1 1 600px;" class="littlecontainer">
          <div style="flex:1 1 600px;height: 230px;">
            <div class="title">二维码生成</div>
            <div style="font-size: 14px;margin-top: 15px;">二维码信息</div>
            <textarea placeholder="请输入二维码内容" rows="5" id="qrInfo" v-model="qrInfo" class="text"></textarea>
            <MButton @click="generateCode">生成</MButton>
          </div>
          <div>
            <div class="title">二维码样式</div>
            <div style="display: flex; align-items: center; justify-content: left;">
              <ul class="button-list">
                <li :class="'button-item ' + (obj.isSelect ? 'button-item-sel' : '')"
                  @mouseover="handleMouseOver(index)" @mouseleave="handleMouseLeave(index)" @click="selectItem(index)"
                  v-for="(obj, index) in qrNameList" :key="index">
                  {{ obj.name }}
                </li>
              </ul>
            </div>
            <div v-if="nowSelect === 0" class="selectDiv">
              <div style="display: flex;align-items: center;">
                <div style="flex: 0 0 80px;">
                  纠错等级：
                </div>
                <label v-for="(option, index) in errOptions" :key="index" style="margin-left: 20px;">
                  <input type="radio" v-model="selectedErr" :value="option" /> {{ option }}
                </label>
              </div>
              <div style="display: flex;margin-top: 30px;align-items: center;">
                <div style="flex: 0 0 80px;">
                  编码方式：
                </div>
                <label v-for="(option, index) in codingOptions" :key="index" style="margin-left: 20px;">
                  <input type="radio" v-model="selectedCoding" :value="option.value" /> {{ option.name }}
                </label>
              </div>
              <div style="display: flex;margin-top: 30px;align-items: center;">
                <div style="flex: 0 0 80px;">
                  版本：
                </div>
                <select v-model="selectedVersion" id="qrVersion"
                  style="width: 30%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;margin-left: 20px;">
                  <option v-for="num in numbers" :value="num + 1" :key="num">{{ num + 1 }}</option>
                </select>
              </div>
              <div style="display: flex;margin-top: 30px;align-items: center;">
                <div style="flex: 0 0 80px;">
                  图片格式：
                </div>
                <label v-for="(option, index) in selectImgType" :key="index" style="margin-left: 20px;">
                  <input type="radio" v-model="imgType" :value="option" /> {{ option }}
                </label>
              </div>
            </div>
            <div v-if="nowSelect === 1" class="selectDiv">
              <div style="display: flex;align-items: center;">
                <div style="flex: 0 0 100px;">
                  像素形状：
                </div>
                <img :class="i.isSelect ? ' iconSel' : ''" v-for="(i, index) in codeIcon1" :key="index" :src="i.icon"
                  @click="iconClick1(index)" style="width: 80px;height: 80px;">
              </div>
              <div style="display: flex;align-items: center;margin-top: 20px;">
                <div style="flex: 0 0 100px;">
                  定位图外框：
                </div>
                <img :class="i.isSelect ? ' iconSel' : ''" v-for="(i, index) in codeIcon2" :key="index" :src="i.icon"
                  @click="iconClick2(index)" style="width: 80px;height: 80px;">
              </div>
              <div style="display: flex;align-items: center;margin-top: 20px;">
                <div style="flex: 0 0 100px;">
                  定位图中心：
                </div>
                <img :class="i.isSelect ? ' iconSel' : ''" v-for="(i, index) in codeIcon3" :key="index" :src="i.icon"
                  @click="iconClick3(index)" style="width: 80px;height: 80px;">
              </div>
            </div>
            <div v-if="nowSelect === 2" class="selectDiv">
              <div style="display: flex;">
                <div style="flex:1 1 200px">
                  <div class="title">像素配置</div>
                  <div style="display: flex;align-items: center;">
                    <div style="flex: 0 0 120px;">
                      是否使用渐变：
                    </div>
                    <input type="checkbox" v-model="codeColor.isGradient">
                  </div>
                  <div style="display: flex;align-items: center;margin-top: 20px;" v-if="!codeColor.isGradient">
                    <div style="flex: 0 0 120px;">
                      颜色：
                    </div>
                    <input type="color" id="foreground" v-model="codeColor.color" />
                  </div>
                  <div v-if="codeColor.isGradient">
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变类型：
                      </div>
                      <label v-for="(option, index) in codeColorOptions" :key="index" style="margin-right: 10px;">
                        <input type="radio" v-model="codeColor.gradient.type" :value="option.value" /> {{ option.name }}
                      </label>
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变角度：
                      </div>
                      <input type="range" id="foreground" v-model="codeColor.gradient.rotation" min="0" max="360" />
                      {{ codeColor.gradient.rotation }}
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变段落：
                      </div>
                      <select v-model="codeColor.gradient.colorStopsNum" id="qrVersion"
                        style="width: 30%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                        <option value="2">2</option>
                        <option value="3">3</option>
                      </select>

                    </div>
                    <div v-if="codeColor.gradient.colorStopsNum === '2'">
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          起始/颜色：
                        </div>
                        <select v-model="codeColor.gradient.colorStops[0].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value="0">0</option>
                          <option value="0.25">0.25</option>
                          <option value="0.5">0.5</option>
                          <option value="0.75">0.75</option>
                          <option value="1">1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor.gradient.colorStops[0].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          结束/颜色：
                        </div>
                        <select v-model="codeColor.gradient.colorStops[2].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor.gradient.colorStops[2].color"
                          style="margin-left: 20px;" />
                      </div>
                    </div>
                    <div v-if="codeColor.gradient.colorStopsNum === '3'">
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          起始/颜色：
                        </div>
                        <select v-model="codeColor.gradient.colorStops[0].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor.gradient.colorStops[0].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          中段/颜色：
                        </div>
                        <select v-model="codeColor.gradient.colorStops[1].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor.gradient.colorStops[1].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          结束/颜色：
                        </div>
                        <select v-model="codeColor.gradient.colorStops[2].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor.gradient.colorStops[2].color"
                          style="margin-left: 20px;" />
                      </div>
                    </div>
                  </div>

                </div>
                <div style="flex:1 1 200px">
                  <div class="title">定位图形外框配置</div>
                  <div style="display: flex;align-items: center;">
                    <div style="flex: 0 0 120px;">
                      是否使用渐变：
                    </div>
                    <input type="checkbox" v-model="codeColor1.isGradient">
                  </div>
                  <div style="display: flex;align-items: center;margin-top: 20px;" v-if="!codeColor1.isGradient">
                    <div style="flex: 0 0 120px;">
                      颜色：
                    </div>
                    <input type="color" id="foreground" v-model="codeColor1.color" />
                  </div>
                  <div v-if="codeColor1.isGradient">
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变类型：
                      </div>
                      <label v-for="(option, index) in codeColorOptions" :key="index" style="margin-right: 10px;">
                        <input type="radio" v-model="codeColor1.gradient.type" :value="option.value" /> {{ option.name
                        }}
                      </label>
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变角度：
                      </div>
                      <input type="range" id="foreground" v-model="codeColor1.gradient.rotation" min="0" max="360" />
                      {{ codeColor1.gradient.rotation }}
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变段落：
                      </div>
                      <select v-model="codeColor1.gradient.colorStopsNum" id="qrVersion"
                        style="width: 30%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                        <option value="2">2</option>
                        <option value="3">3</option>
                      </select>

                    </div>
                    <div v-if="codeColor1.gradient.colorStopsNum === '2'">
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          起始/颜色：
                        </div>
                        <select v-model="codeColor1.gradient.colorStops[0].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value="0">0</option>
                          <option value="0.25">0.25</option>
                          <option value="0.5">0.5</option>
                          <option value="0.75">0.75</option>
                          <option value="1">1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor1.gradient.colorStops[0].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          结束/颜色：
                        </div>
                        <select v-model="codeColor1.gradient.colorStops[2].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor1.gradient.colorStops[2].color"
                          style="margin-left: 20px;" />
                      </div>
                    </div>
                    <div v-if="codeColor1.gradient.colorStopsNum === '3'">
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          起始/颜色：
                        </div>
                        <select v-model="codeColor1.gradient.colorStops[0].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor1.gradient.colorStops[0].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          中段/颜色：
                        </div>
                        <select v-model="codeColor1.gradient.colorStops[1].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor1.gradient.colorStops[1].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          结束/颜色：
                        </div>
                        <select v-model="codeColor1.gradient.colorStops[2].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor1.gradient.colorStops[2].color"
                          style="margin-left: 20px;" />
                      </div>
                    </div>
                  </div>

                </div>
                <div style="flex:1 1 200px">
                  <div class="title">定位图形中心配置</div>
                  <div style="display: flex;align-items: center;">
                    <div style="flex: 0 0 120px;">
                      是否使用渐变：
                    </div>
                    <input type="checkbox" v-model="codeColor2.isGradient">
                  </div>
                  <div style="display: flex;align-items: center;margin-top: 20px;" v-if="!codeColor2.isGradient">
                    <div style="flex: 0 0 120px;">
                      颜色：
                    </div>
                    <input type="color" id="foreground" v-model="codeColor2.color" />
                  </div>
                  <div v-if="codeColor2.isGradient">
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变类型：
                      </div>
                      <label v-for="(option, index) in codeColorOptions" :key="index" style="margin-right: 10px;">
                        <input type="radio" v-model="codeColor2.gradient.type" :value="option.value" /> {{ option.name
                        }}
                      </label>
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变角度：
                      </div>
                      <input type="range" id="foreground" v-model="codeColor2.gradient.rotation" min="0" max="360" />
                      {{ codeColor2.gradient.rotation }}
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 20px;">
                      <div style="flex: 0 0 100px;">
                        渐变段落：
                      </div>
                      <select v-model="codeColor2.gradient.colorStopsNum" id="qrVersion"
                        style="width: 30%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                        <option value="2">2</option>
                        <option value="3">3</option>
                      </select>

                    </div>
                    <div v-if="codeColor2.gradient.colorStopsNum === '2'">
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          起始/颜色：
                        </div>
                        <select v-model="codeColor2.gradient.colorStops[0].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value="0">0</option>
                          <option value="0.25">0.25</option>
                          <option value="0.5">0.5</option>
                          <option value="0.75">0.75</option>
                          <option value="1">1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor2.gradient.colorStops[0].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          结束/颜色：
                        </div>
                        <select v-model="codeColor2.gradient.colorStops[2].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor2.gradient.colorStops[2].color"
                          style="margin-left: 20px;" />
                      </div>
                    </div>
                    <div v-if="codeColor2.gradient.colorStopsNum === '3'">
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          起始/颜色：
                        </div>
                        <select v-model="codeColor2.gradient.colorStops[0].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor2.gradient.colorStops[0].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          中段/颜色：
                        </div>
                        <select v-model="codeColor2.gradient.colorStops[1].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor2.gradient.colorStops[1].color"
                          style="margin-left: 20px;" />
                      </div>
                      <div style="display: flex;align-items: center;margin-top: 20px;">
                        <div style="flex: 0 0 100px;">
                          结束/颜色：
                        </div>
                        <select v-model="codeColor2.gradient.colorStops[2].offset" id="qrVersion"
                          style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                          <option value=0>0</option>
                          <option value=0.25>0.25</option>
                          <option value=0.5>0.5</option>
                          <option value=0.75>0.75</option>
                          <option value=1>1</option>
                        </select>
                        <input type="color" id="foreground" v-model="codeColor2.gradient.colorStops[2].color"
                          style="margin-left: 20px;" />
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>
            <div v-if="nowSelect === 3" class="selectDiv">
              <div style="display: flex;align-items: center;">
                <div style="flex: 0 0 100px;">
                  上传logo：
                </div>
                <MButton style="width: 100px;margin: 0 10px;" @click="handleUploadClick">上传</MButton>
                {{ logoInfo.name }}
                <input type="file" @change="handleFileChange" accept="image/*" style="display: none" />
              </div>
              <div style="display: flex;margin-top: 30px;align-items: center;">
                <div style="flex: 0 0 100px;">
                  logo系数：
                </div>
                <select v-model="logoInfo.imageSize" id="qrVersion"
                  style="width: 15%;background: #F2F3F5;border: none;font-size: 12px;height: 28px;">
                  <option value="0">0</option>
                  <option value="0.2">0.2</option>
                  <option value="0.4">0.4</option>
                  <option value="0.5">0.5</option>
                  <option value="0.75">0.7</option>
                  <option value="1">1</option>
                </select>
              </div>
            </div>
            <div v-if="nowSelect === 4" class="selectDiv">
              <div style="display: flex;align-items: center;">
                <div style="flex: 0 0 80px;">
                  文字内容：
                </div>
                <textarea placeholder="请输入二维码内容" rows="5" id="qrInfo" v-model="logoText.value" class="text"></textarea>
              </div>
              <div style="display: flex;margin-top: 20px;align-items: center;">
                <div style="flex: 0 0 80px;">
                  文字大小：
                </div>
                <input type="range" id="foreground" v-model="logoText.textSize" min="14" max="30" />
                {{ logoText.textSize }}
              </div>
              <div style="display: flex;margin-top: 30px;align-items: center;">
                <div style="flex: 0 0 80px;">
                  文字颜色：
                </div>
                <input type="color" id="background" v-model="logoText.color" />
              </div>
              <div style="display: flex;margin-top: 30px;align-items: center;">
                <div style="flex: 0 0 80px;">
                  文字样式：
                </div>
                <input type="checkbox" v-model="logoText.isB" value="male" style="margin: 0 5px 0 0;">加粗
                <input type="checkbox" v-model="logoText.isI" value="male" style="margin: 0 5px 0 10px;">倾斜
                <input type="checkbox" v-model="logoText.isU" value="male" style="margin: 0 5px 0 10px;">下划线

              </div>
            </div>

          </div>

        </div>

        <div class="littlecontainer" style="flex:0 0 450px;margin-left: 15px;">
          <div style="display: flex;justify-content: center;">
            <div ref="canvasi">
              <div ref="qrCode">
                <!-- <div style="text-align: center;">{{ qrInfo }}</div> -->
              </div>
              <div
                :style="{ marginBottom: '10px', textAlign: 'center', fontSize: logoText.textSize + 'px', color: logoText.color, fontWeight: logoText.isB ? 'bold' : '', fontStyle: logoText.isI ? 'italic' : '', textDecoration: logoText.isU ? 'underline' : '' }">
                {{ logoText.value }}
              </div>
            </div>

          </div>
          <div class="divider">
            <span>保存图片</span>
          </div>
          <div style="display: flex;align-items: center;margin-top: 20px;">
            <div style="width: 80px;">下载图片：</div>
            <div style="flex:1 1 180px">
              <MButton class="imgType" @click="downloadCode">下载</MButton>
              <!-- <MButton class="imgType" @click="downloadCode('svg')">SVG</MButton> -->
            </div>

          </div>
        </div>

      </div>

    </div>

    <!-- <div style="font-size: 12px;position: absolute;bottom: 5px;">
        *该工具仅支持数字，手绘二维码版本为1
      </div> -->
  </div>
</template>

<script>
import MButton from '../components/MButton.vue'
//import MInput from '../components/MInput.vue'
import { ref, reactive, onMounted } from 'vue';
import html2canvas from 'html2canvas';
import rounded from '@/assets/codeIcon/icon1/rounded.png'
import dots from '@/assets/codeIcon/icon1/dots.png'
import classy from '@/assets/codeIcon/icon1/classy.png'
import classyrounded from '@/assets/codeIcon/icon1/classy-rounded.png'
import square from '@/assets/codeIcon/icon1/square.png'
import extrarounded from '@/assets/codeIcon/icon1/extra-rounded.png'
import brounded from '@/assets/codeIcon/icon2/rounded.png'
import bdots from '@/assets/codeIcon/icon2/dots.png'
import bdot from '@/assets/codeIcon/icon2/dot.png'
import bclassy from '@/assets/codeIcon/icon2/classy.png'
import bclassyrounded from '@/assets/codeIcon/icon2/classy-rounded.png'
import bsquare from '@/assets/codeIcon/icon2/square.png'
import bextrarounded from '@/assets/codeIcon/icon2/extra-rounded.png'
import crounded from '@/assets/codeIcon/icon3/rounded.png'
import cdots from '@/assets/codeIcon/icon3/dots.png'
import cdot from '@/assets/codeIcon/icon3/dot.png'
import cclassy from '@/assets/codeIcon/icon3/classy.png'
import cclassyrounded from '@/assets/codeIcon/icon3/classy-rounded.png'
import csquare from '@/assets/codeIcon/icon3/square.png'
import cextrarounded from '@/assets/codeIcon/icon3/extra-rounded.png'
import QRCodeStyling from 'qr-code-styling';
export default {
  name: 'QrDestroy',
  props: {
    msg: String
  },
  components: {
    MButton,
    //MInput
  },

  setup() {
    const nowSelect = ref(0)
    const canvasi = ref([])
    const qrInfo = ref("QRCODE")
    const selectedVersion = ref(1)
    const selectedErr = ref("L")
    const selectedCoding = ref("Byte")
    const imgType = ref("png")
    const selectIcon = ref(["rounded", "rounded", "rounded"])
    const selectImgType = ref(["png", "jpg", "svg"])
    const errOptions = ["L", "M", 'Q', 'H']
    const codingOptions = [
      { name: "数字", value: "Numeric" },
      { name: "字母数字", value: "Alphanumeric" },
      { name: "字节", value: "Byte" },
      { name: "汉字", value: "Kanji" },]
    const logoInfo = ref({
      name: "",
      imageSize: "0.4",
    })
    const logoText = ref({
      value: "",
      textSize: "20",
      color: "#000000",
      isB: false,
      isI: false,
      isU: false
    })
    const codeColor = ref({
      isGradient: false,
      color: '#000000',
      gradient: {
        type: 'linear', // 'radial'
        rotation: "45",
        colorStopsNum: "3",
        colorStops: [
          { offset: "0", color: '#000000' },
          { offset: "0.5", color: '#000000' },
          { offset: "1", color: '#000000' }
        ]
      },
    })
    const codeColor1 = ref({
      isGradient: false,
      color: '#000000',
      gradient: {
        type: 'linear', // 'radial'
        rotation: "45",
        colorStopsNum: "3",
        colorStops: [
          { offset: "0", color: '#000000' },
          { offset: "0.5", color: '#000000' },
          { offset: "1", color: '#000000' }
        ]
      },
    })
    const codeColor2 = ref({
      isGradient: false,
      color: '#000000',
      gradient: {
        type: 'linear', // 'radial'
        rotation: "45",
        colorStopsNum: "3",
        colorStops: [
          { offset: "0", color: '#000000' },
          { offset: "0.5", color: '#000000' },
          { offset: "1", color: '#000000' }
        ]
      },
    })
    const codeColorOptions = [{ name: "线性", value: "linear" }, { name: "中心", value: "radial" }]
    const codeIcon1 = ref([
      { name: "rounded", icon: rounded, isSelect: true },
      { name: "dots", icon: dots, isSelect: false },
      { name: "classy", icon: classy, isSelect: false },
      { name: "classy-rounded", icon: classyrounded, isSelect: false },
      { name: "square", icon: square, isSelect: false },
      { name: "extra-rounded", icon: extrarounded, isSelect: false }
    ])
    const codeIcon2 = ref([
      { name: "rounded", icon: brounded, isSelect: true },
      { name: "dots", icon: bdots, isSelect: false },
      { name: "dot", icon: bdot, isSelect: false },
      { name: "classy", icon: bclassy, isSelect: false },
      { name: "classy-rounded", icon: bclassyrounded, isSelect: false },
      { name: "square", icon: bsquare, isSelect: false },
      { name: "extra-rounded", icon: bextrarounded, isSelect: false }
    ])
    const codeIcon3 = ref([
      { name: "rounded", icon: crounded, isSelect: true },
      { name: "dots", icon: cdots, isSelect: false },
      { name: "dot", icon: cdot, isSelect: false },
      { name: "classy", icon: cclassy, isSelect: false },
      { name: "classy-rounded", icon: cclassyrounded, isSelect: false },
      { name: "square", icon: csquare, isSelect: false },
      { name: "extra-rounded", icon: cextrarounded, isSelect: false }
    ])
    const numbers = Array.from({ length: 40 }, (_, i) => i);
    const qrNameList = ref([
      {
        name: "基础配置",
        isSelect: true,
        type: 0
      },
      {
        name: "外形配置",
        isSelect: false,
        type: 1
      },
      {
        name: "颜色配置",
        isSelect: false,
        type: 2
      },
      {
        name: "添加logo",
        isSelect: false,
        type: 3
      },
      {
        name: "添加文字",
        isSelect: false,
        type: 4
      }])
    const extension = ref('png');
    const options = reactive({
      width: 350,
      height: 350,
      type: 'png',
      data: "QRCODE",
      image: '/favicon.ico',
      margin: 10,
      qrOptions: {
        typeNumber: 1,
        mode: 'Byte',
        errorCorrectionLevel: 'L'
      },
      imageOptions: {
        hideBackgroundDots: true,
        imageSize: 0.4,
        //margin: 10,
        crossOrigin: 'anonymous',
      },
      dotsOptions: {
        color: '#000000',
        type: 'rounded'
      },
      backgroundOptions: {
        color: '#ffffff',
      },
      cornersSquareOptions: {
        color: '#000000',
        type: 'rounded',
      },
      cornersDotOptions: {
        color: '#000000',
        type: 'rounded',
      }
    });
    const iconClick1 = (index) => {
      selectIcon.value[0] = codeIcon1.value[index].name
      setSelect(codeIcon1.value, index)
    }
    const iconClick2 = (index) => {
      selectIcon.value[1] = codeIcon2.value[index].name
      setSelect(codeIcon2.value, index)
    }
    const iconClick3 = (index) => {
      selectIcon.value[2] = codeIcon3.value[index].name
      setSelect(codeIcon3.value, index)
    }
    function setSelect(arr, n) {
      // 将所有元素的 isSelect 设为 false
      arr.forEach(item => {
        item.isSelect = false;
      });

      // 将第 n 个元素的 isSelect 设为 true
      if (arr[n]) {
        arr[n].isSelect = true;
      }
    }
    const qrCode = ref(null);

    // 初始化 QRCodeStyling 实例
    const qr = new QRCodeStyling(options);

    // 当 options 更新时，重新渲染 QR 码
    // watch(() => options.data, () => {
    //   qr.update(options);
    // });

    // 在组件挂载时初始化二维码
    onMounted(() => {
      if (qrCode.value) {
        qr.append(qrCode.value);
      }
    });

    // 下载二维码
    const download = () => {
      qr.download({ extension: extension.value });
    };
    const downloadCode = () => {
      //download()
      if (imgType.value !== "svg") {
        const tableElement = canvasi.value; // 获取 table 元素
        html2canvas(tableElement, { scale: 2, }).then((canvas) => {
          // 将 canvas 转换为图片数据 URL
          const dataURL = canvas.toDataURL('image/png');

          // 创建下载链接并模拟点击
          const link = document.createElement('a');
          link.href = dataURL;
          link.download = `${qrNameList.value[nowSelect.value].type}.${imgType.value}`;
          link.click();
        });
      } else {
        const svgElement = document.querySelector('svg'); // 获取 SVG 元素
        const svgData = new XMLSerializer().serializeToString(svgElement); // 序列化为字符串

        // 创建 Blob 对象
        const blob = new Blob([svgData], { type: 'image/svg+xml' });

        // 创建下载链接并模拟点击
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'downloaded-file.svg'; // 这里指定下载的文件名
        link.click();
      }


    }
    const handleUploadClick = () => {
      const fileInput = document.querySelector('input[type="file"]');
      if (fileInput) {
        fileInput.click();
      }
    };
    const handleFileChange = async (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          logoInfo.value.name = file.name
          options.image = e.target.result
        };
        reader.readAsDataURL(file); // 读取文件为 DataURL

      }

    };

    const generateCode = () => {

      options.data = qrInfo.value
      options.qrOptions.typeNumber = selectedVersion.value
      options.qrOptions.errorCorrectionLevel = selectedErr.value
      options.qrOptions.mode = selectedCoding.value
      console.log(codeColor.value.isGradient, codeColor1.value.isGradient, codeColor2.value.isGradient);

      if (codeColor.value.isGradient) {
        options.dotsOptions = {
          // color: codeColor.value.color,
          gradient: {
            type: codeColor.value.gradient.type, // 'radial'
            rotation: Number(codeColor.value.gradient.rotation),
            colorStops: codeColor.value.gradient.colorStopsNum === "2" ? [
              { offset: codeColor.value.gradient.colorStops[0].offset, color: codeColor.value.gradient.colorStops[0].color },
              { offset: codeColor.value.gradient.colorStops[2].offset, color: codeColor.value.gradient.colorStops[2].color },
            ] :
              [
                { offset: codeColor.value.gradient.colorStops[0].offset, color: codeColor.value.gradient.colorStops[0].color },
                { offset: codeColor.value.gradient.colorStops[1].offset, color: codeColor.value.gradient.colorStops[1].color },
                { offset: codeColor.value.gradient.colorStops[2].offset, color: codeColor.value.gradient.colorStops[2].color },
              ]
          },
          type: selectIcon.value[0]
        }
      } else {
        options.dotsOptions = {
          color: codeColor.value.color,
          type: selectIcon.value[0]
        }
      }
      if (codeColor1.value.isGradient) {
        options.cornersSquareOptions = {
          color: codeColor1.value.color,
          gradient: {
            type: codeColor1.value.gradient.type, // 'radial'
            rotation: Number(codeColor1.value.gradient.rotation),
            colorStops: codeColor1.value.gradient.colorStopsNum === "2" ? [
              { offset: codeColor1.value.gradient.colorStops[0].offset, color: codeColor1.value.gradient.colorStops[0].color },
              { offset: codeColor1.value.gradient.colorStops[2].offset, color: codeColor1.value.gradient.colorStops[2].color },
            ] :
              [
                { offset: codeColor1.value.gradient.colorStops[0].offset, color: codeColor1.value.gradient.colorStops[0].color },
                { offset: codeColor1.value.gradient.colorStops[1].offset, color: codeColor1.value.gradient.colorStops[1].color },
                { offset: codeColor1.value.gradient.colorStops[2].offset, color: codeColor1.value.gradient.colorStops[2].color },
              ]
          },
          type: selectIcon.value[1]
        }
      } else {
        options.cornersSquareOptions = {
          color: codeColor1.value.color,
          type: selectIcon.value[1]
        }
      }
      if (codeColor2.value.isGradient) {
        options.cornersDotOptions = {
          color: codeColor2.value.color,
          gradient: {
            type: codeColor2.value.gradient.type, // 'radial'
            rotation: Number(codeColor2.value.gradient.rotation),
            colorStops: codeColor2.value.gradient.colorStopsNum === "2" ? [
              { offset: codeColor2.value.gradient.colorStops[0].offset, color: codeColor2.value.gradient.colorStops[0].color },
              { offset: codeColor2.value.gradient.colorStops[2].offset, color: codeColor2.value.gradient.colorStops[2].color },
            ] :
              [
                { offset: codeColor2.value.gradient.colorStops[0].offset, color: codeColor2.value.gradient.colorStops[0].color },
                { offset: codeColor2.value.gradient.colorStops[1].offset, color: codeColor2.value.gradient.colorStops[1].color },
                { offset: codeColor2.value.gradient.colorStops[2].offset, color: codeColor2.value.gradient.colorStops[2].color },
              ]
          },
          type: selectIcon.value[2]
        }
      } else {
        options.cornersDotOptions = {
          color: codeColor2.value.color,
          type: selectIcon.value[2]
        }
      }
      options.imageOptions.imageSize = logoInfo.value.imageSize
      try {
        qrCode.value.innerHTML = ""
        const qr = new QRCodeStyling(options);
        qr.append(qrCode.value)
      } catch (e) {
        alert(e)
      }

    }

    const selectItem = (n) => {

      qrNameList.value.forEach((item, index) => {
        item.isSelect = index === n;  // 只有第n个元素是true，其他都是false
      });
      nowSelect.value = n
    }

    const handleMouseOver = (n) => {
      if (nowSelect.value !== n) {
        qrNameList.value[n].isSelect = true
      }

    };

    const handleMouseLeave = (n) => {
      if (nowSelect.value !== n) {
        qrNameList.value[n].isSelect = false
      }
    };
    return {
      qrNameList,
      canvasi,
      qrInfo,
      nowSelect,
      extension,
      options,
      qrCode,
      numbers,
      selectedVersion,
      errOptions,
      selectedErr,
      codingOptions,
      selectedCoding,
      codeIcon1,
      codeIcon2,
      codeIcon3,
      codeColor,
      codeColor1,
      codeColor2,
      codeColorOptions,
      logoInfo,
      logoText,
      imgType,
      selectImgType,
      handleFileChange,
      handleUploadClick,
      download,
      downloadCode,
      selectItem,
      generateCode,
      handleMouseOver,
      handleMouseLeave,
      iconClick1,
      iconClick2,
      iconClick3
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.selectDiv {
  padding: 40px 20px;
}

.title {
  margin-bottom: 10px;
  text-align: left;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 750px;
}

.card {
  width: 90%;
  height: calc(100% - 100px);
  /* background: green; */
  /* box-shadow: 0 8px 12px rgba(49, 49, 49, 0.3); */
  border-radius: 5px;
  padding: 20px 20px 0 20px;
  /* background-color: white; */
  transition: box-shadow 0.3s ease;
  text-align: left;

}

.littlecontainer {
  background-color: white;
  border-radius: 10px;
  border: 1px solid #b6b6b69d;
  box-shadow: 0 8px 12px rgba(49, 49, 49, 0.3);
  padding: 20px;
}

.button-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.button-item {
  height: 40px;
  line-height: 40px;
  margin-right: 40px;
  color: #747474;
  cursor: pointer;
  box-sizing: border-box;
}

.button-item-sel {
  border-bottom: 2px solid black;
  color: black;
}

.text {
  width: calc(100% - 20px);
  background: #F2F3F5;
  border: none;
  font-size: 12px;
  margin-bottom: 15px;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}


.divider {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  position: relative;
  margin: 10px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-top: 1px dashed #000;
  /* 设置分割线样式 */
}

.divider span {
  padding: 0 10px;
  /* 控制文字与分割线的间距 */
  background-color: white;
  /* 防止文字被分割线覆盖 */
  z-index: 1;
  /* 确保文字在分割线之上 */
}

.imgType {
  background: white;
  color: black;
  border: 1px solid #e2e2e2;
  width: 60px;
  margin: 0 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table {
  border: none;
  margin-top: 20px;
}

th {
  border-right: 2px solid white;
  background-color: #f5f5f5;
  padding: 8px;
  text-align: left;
}

td {
  border: none;
  padding: 8px;
  text-align: left;
  border-right: 2px solid rgb(230, 230, 230);
}

img {
  margin: 0 10px;
}

img:hover {
  outline: 2px solid #457bf7ff;
  border-radius: 10px;
  outline-offset: 1px;
}

.iconSel {
  outline: 2px solid #457bf7ff;
  border-radius: 10px;
  outline-offset: 1px;
}

::-webkit-scrollbar-thumb {
  background-color: #8d8c8c9d
}
</style>
